import React,{useEffect,useState} from 'react';
import { Space, Table ,Button,message,Switch,} from 'antd';
import { PlusOutlined, ArrowDownOutlined } from '@ant-design/icons';
import type { ColumnsType } from 'antd/es/table';
import service from "../../../api/index"
import { useNavigate } from 'react-router-dom';
import './Swiper.scss'
interface Props{}
interface DataType {
    key: string;
    name: string;
    img: string;
    age: number;
    address: string;
    tags: string[];
    art:string;
    link:string;
    bannerid:string
    flag:boolean
    alt:string
  }
  
  function Swiper(props:Props) {
    var navigate= useNavigate()
    const [list,setList]=useState([])
    let getList =()=>{
        service.banner.banner_list().then((res)=>{
            // console.log('轮播图',res.data.data);
            if (res.data.code == '200') {
                setList(res.data.data);
            }
        })
    }
    useEffect(()=>{
        getList()
    },[])
    const columns: ColumnsType<DataType> = [
        {
            title: '序号',
            dataIndex: 'bannerid',
            key: 'bannerid',
            render: (_,record,index) => <a>{index + 1}</a>,
        },
        {
            title: '图片',
            dataIndex: 'img',
            key: 'img',
            render: (_, record) => (
                <Space size="middle" className='imgg' >
                    <img style={{width:100}} src={record.img} alt="" />
                </Space>
            ),
            width:'300px'
        },
        {
            title: '链接',
            dataIndex: 'link',
            key: 'link',
            render: (_, record) => (
                <Space size="middle">
                    <a href={record.link}>{record.link}</a>
                </Space>
            ),
        },
        {
            title: '是否选中',
            key: 'flag',
            dataIndex: 'flag',
            render: (_, record) => (
                <Space size="middle">
                    <Switch onClick={()=>{isxuanzhong(record.flag,record.bannerid)}} defaultChecked={record.flag} />
                </Space>
            ),
        },
        {
            title: '提示',
            key: 'alt',
            dataIndex: 'alt',
            render: (_, record) => (
                <Space size="middle">
                    <span>{record.alt}</span>
                </Space>
            ),
        },
        {
            title: '操作',
            key: 'action',
            render: (_, record) => (
                <Space size="middle">
                    <Button danger type="primary" onClick={() => { deleteBanner(record.bannerid) }}>删除</Button>
                </Space>
            ),
        },
    ];
    const isxuanzhong=async (flag:boolean,bannerid:string)=>{
        flag=!flag
        let res = await service.banner.banner_updateFlag({bannerid,flag})
        console.log(res.data);
        if (res.data.code == '200') {
            message.success('更新成功')
            getList()
        } else {
            message.error('更新失败')
        }
    }
    const zengjia=()=>{
        navigate('/index/swiperadd')
    }
    let deleteBanner = async (bannerid: string) => {
        let res = await service.banner.banner_delete({ bannerid });
        // console.log(res.data);

        if (res.data.code === '200') {
            message.success('删除成功')
            getList()
        } else {
            message.error('删除失败')
        }
    }
    let delswiper=async()=>{
        let res = await service.banner.banner_removeAll({ });
        if (res.data.code === '200') {
            message.success('删除成功')
            getList()
        } else {
            message.error('删除失败')
        }
    }
    return (
        <div className='Swiper'>
            <div className='btns'>
                <div>

                <Button type="primary" onClick={zengjia}>导入<PlusOutlined/></Button>
                <Button type="primary" style={{marginLeft:10}}>导出<ArrowDownOutlined /></Button>
                </div>
                <Button type="primary" onClick={delswiper}>删除全部轮播图</Button>
            </div>
            <div>
            <Table columns={columns} dataSource={list} rowKey='bannerid'/>
            </div>
        </div>
    );
}

export default Swiper;